<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
        *{
        	margin:0;
        	padding:0;
        }
		ol li{
			border:1px solid #ededed;
			color:#fff;
		}
		ol li:nth-child(n+10):nth-last-child(2){
			background:#000;
		}
        </style>
    </head>
    <body>
    	<ol>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    		<li></li>
    	</ol>
    </body>
    <script type="text/javascript">
    	var li = document.getElementsByTagName("li");
    	var i = li.length;
    	while (li[--i]) {
    		li[i].innerHTML =  i+1;
    	}
    </script>
</html>
